<template>
  <div>
    <van-nav-bar
        title="瑞吉外卖"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      >
    </van-nav-bar>  

    <div style="border: 1px">
      <van-swipe-cell>
        <van-card
          desc="此商家特别好，信誉度高"
          title="外卖商家"
          class="goods-card"
          thumb="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
      </van-swipe-cell>
    </div>

    <van-tree-select
      height="110vw"
      :items="items"
      :main-active-index.sync="active"
      @click-nav="change"
    >
      <template #content>
        <van-card
          num="1"
          :price="i.price"
          :desc="i.description"
          :title="i.name"
          thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
          v-for="(i, index) in list1"
          :key="index"
        >
          <template #tags>
            <van-tag plain type="danger">销量500</van-tag>
          </template>
          <template #footer>
            <van-button size="mini" @click="buy(i['id'],i['flavors'])">购买</van-button>
          </template>
        </van-card>
      </template>
    </van-tree-select>
    <van-dialog v-model="show" title="选择口味" show-cancel-button style="width:50%" @confirm="submit">
      <van-radio-group v-model="radio[index]" v-for='(i,index) in flavorlist' :key="index">
        <van-radio :value='j' :name="j" v-for="(j,ind) in i" :key="ind">{{j}}</van-radio>
      </van-radio-group>
      <van-button>提交</van-button>



    </van-dialog>

    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="search">搜索</van-tabbar-item>
      <van-tabbar-item icon="friends-o">我的</van-tabbar-item>
      <van-tabbar-item icon="setting-o">设置</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import axios from '@/comm/api'
export default {
  data() {
    return {
      activeKey: 0,
      active: "",
      show:false,
      items: [],
      list1: [],
      type:1,
      redio:[],
      buyid:0,
      flavorlist:[]
      
    };
  },

  mounted() {},

  methods: {
       onClickLeft() {
            Toast('返回');
        },
        onClickRight() {
            Toast('按钮');
        },
        change(index){
          this.getgoods(this.items[index]['id'])
        },
        getcateslist(){
          axios.get("/index/getcates").then((result) => {
            if (result.data.code==200){
              this.items=result.data.catelist
              
              console.log('获取成功',result)
            }
            this.getgoods(this.items[0]["id"])
          }).catch((err)=>{
            console.log('获取失败',err)
          })
        },   
        // getCate(){
        //   axios.get("/index/getcates")
        // },
        getgoods(cateid){
          axios.get("/index/idgetcates?cateid="+cateid).then((result) => {
            if (result.data.code==200){
              this.list1=result.data.catelist
              console.log('获取成功',result)
            }
          }).catch((err)=>{
            console.log('获取失败',err)
          })
        },
        buy(id,flavors){
            if(flavors){
              alert(11111)
              this.radio=[]
              this.buyid=id
              this.flavorlist=flavors
              //选择口味
              this.show=true
            }else{
              //调用加入购物车的接口
              this.addcart()
            }
        },
        submit(){
          alert(this.radio)
          this.addcart()
        },
        addcart(){
          var flavors=JSON.stringify(this.radio)
          axios.get('/index/addcart?userid=20&gid='+this.buyid+'&count=1&type='+this.type+'&flavors='+flavors).then(res=>{
          console.log('添加',res)
          })
        }
  },
  mounted(){
    // this.getCate();
    this.getcateslist()
  }
};
</script>

<style scoped>
.van-nav-bar__content {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  height: 60px;
}

.goods-card {
  margin: 0;
  background-color: aliceblue;
}

.delete-button {
  height: 100%;
}

</style>

